Previously we have implemented search functionality in listview : Simple Search implementation in android

In this article, we are going to implement a simple Navigation drawer List view.

The navigation drawer is a UI design pattern that provides a set of menu items when the user swipes from the left edge of the application to the right.

In Android, a navigation drawer is available via the Android Support library from revision 13.

We can see navigation drawers on YouTube, Google, and Facebook, etc. It is a very popular way to show menu navigation nowadays.

Pre-Requisites:

• Ellipse SDK
• Android SDK
• ADT plugin

Or Android Studio and a compatible version of JAVA SDK

Install and configure the above utilities.

Now create a new Android project namely “MindStickDrawer”. 

Implementation objective:

To show the list of companies with their icons in the Navigation Drawer list view. When an item is selected then the company’s icon and name will be displayed on the screen. 

Set String Resources

First of all set values for string resources in strings.xml  

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">MindStickDrawer</string>
    <string name="hello_world">Hello world!</string>
    <string name="action_settings">Settings</string>
    <string name="drawer_open">Open Navigation drawer</string>
    <string name="drawer_close">Close Navigation drawer</string>

</resources> 

Creating GUIs

Now, we need to add views in our view groups, i.e. add widgets to our GUI.

 We need

• A Drawer Layout (main GUI) consists of a Frame Layout (it will be shown  when the user select an item from the navigation list  and  List view (it will show the items in list view for navigation)
• A Fragment GUI which will be set to the Frame Layout. (It consists of a Text view and an image view)
• One more Layout for holding an item in the navigation list. (It also consists of an icon and text view)

For this, navigate to res/Layout/activity_main.xml from package explorer in Eclipse. Open activity_main.xml

Add the following code into it:

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/drawer_layout" 
 

    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" /> 

    <!-- The navigation drawer -->
    <ListView android:id="@+id/drawer_list"
        android:layout_width="240dp"
        android:layout_height="wrap_content"
        android:layout_gravity="start"
        android:choiceMode="singleChoice"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp"
        android:background="#111"

        />

</android.support.v4.widget.DrawerLayout> 

Next, navigate to res/Layout/fragment_layout.xml from package explorer in Eclipse.

Open fragment_layout.xml   

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout

    xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical"> 

    <ImageView

        android:id="@+id/tv_icon"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:src="@drawable/ic_launcher"/>
 

    <TextView

        android:id="@+id/tv_content"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:gravity="center"

        android:textSize="40sp" /> 

 

</LinearLayout> 

 Next, navigate to res/Layout/drawer_list_item.xml from package explorer in Eclipse.

Open drawer_list_item.xml  

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView        android:id="@+id/icon"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_alignParentLeft="true"
        android:src="@drawable/ic_launcher"/>

    <TextView
        android:id="@+id/text1"
        android:layout_width="fill_parent"
        android:layout_height="50dp"
        android:textAppearance="?android:attr/textAppearanceListItemSmall"
        android:paddingLeft="16dp"
        android:paddingRight="16dp"
        android:textColor="#fff"
        android:background="?android:attr/activatedBackgroundIndicator"
        android:minHeight="?android:attr/listPreferredItemHeightSmall"
        />

</LinearLayout>

Creating a Fragment:

Fragment will be shown on the screen when an item in the navigation drawer is selected. Now navigate to the src folder and create a new fragment “CompanyFragment” and extend Fragments to it.

Add this code in it: 

package com.example.msclient010.mindstickdrawer; 
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView; 

public class CompanyFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {

        // Retrieving the currently selected title  and icon
        String mTitle = getArguments().getString("mTitle");
        int mIcon = getArguments().getInt("imageId");
        //creating view correspond to the fragment
        View v = inflater.inflate(R.layout.fragment_layout, container, false);

        //getting reference to the text view and imageView of the fragment
        TextView tv = (TextView) v.findViewById(R.id.tv_content);
        ImageView icon = (ImageView) v.findViewById(R.id.tv_icon); 

        //set currently selected company name and icon in the fragment
        tv.setText(mTitle);
        icon.setImageResource(mIcon);

        return v;

    }

} 

 Creating a Custom List adapter

To show our company’s icon and name in a customized list view we need to create a custom adapter which will set an icon and company name in each row item of our list

Navigate to the src folder and create a new java class called “CustomListAdapter” and extend ArrayAdapter to it. Add this code in it

package com.example.msclient010.mindstickdrawer;
import android.app.Activity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView; 
import java.util.List; 

 

public class CustomListAdapter extends ArrayAdapter { 

    //create a context, a string list for name and Integer List for icon resources
    private final Activity _context;
    private List<String> _text;
    private List<Integer> _icon;
 

    //create a constructor for adapter and initialize the context and other resources
    public CustomListAdapter(Activity context, List<String> text, List<Integer> icon) {
        super(context, R.layout.drawer_list_item, text);
        _context = context;
        _icon = icon;
        _text = text;

    } 

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {

        //Inflate the view for ListView item for each row of drawer list
        LayoutInflater inflater = _context.getLayoutInflater();
        View rowView = inflater.inflate(R.layout.drawer_list_item, null, true);
        //getting reference to the text view and imageView
        TextView txtTitle = (TextView) rowView.findViewById(R.id.text1);
        ImageView imageView = (ImageView) rowView.findViewById(R.id.icon);

        //Set values for text and image
        txtTitle.setText(_text.get(position));
        imageView.setImageResource(_icon.get(position));
        //return the row view to the adapter

        return rowView;

    }

}

package com.example.msclient010.mindstickdrawer;
import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.support.v4.app.ActionBarDrawerToggle;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarActivity;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;
import java.util.ArrayList;
import java.util.List; 

public class MainActivity extends ActionBarActivity {

    // Within which the activity is enclosed
    DrawerLayout mDrawerLayout;
    // Listview representing navigation drawer
    ListView mDrawerList;
    // ActionBarDrawerToggle indicates the presence of Navigation Drawer in the action bar
    ActionBarDrawerToggle mDrawerToggle;
    //List item contents ---- list of company names and icon
    List<String> compList;
    List<Integer> icons;
    // title and icon of the action bar
    String mTitle = "";
    int imageId = 0; 

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mTitle = (String) getTitle();

        //add company names
        compList = new ArrayList<String>();
        compList.add("MindStick");
        compList.add("Oracle");
        compList.add("Microsoft");
        compList.add("Apple");
        compList.add("Amazon");
        //add icons for corresponding companies
        icons = new ArrayList<Integer>();
        icons.add(R.drawable.mindstick);
        icons.add(R.drawable.oracle);
        icons.add(R.drawable.microsoft);
        icons.add(R.drawable.apple);
        icons.add(R.drawable.amazon); 

        // Getting reference to DrawerLayout
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        mDrawerList = (ListView) findViewById(R.id.drawer_list);

        // getting reference to the ActionBarDrawerToggle
        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,
                R.drawable.google, R.string.drawer_open,
                R.string.drawer_close) {

            /** Called when drawer is closed */
            public void onDrawerClosed(View view) {
                getSupportActionBar().setTitle(mTitle);
                invalidateOptionsMenu();
            }

            /** Called when a drawer is opened */
            public void onDrawerOpened(View drawerView) {
                getSupportActionBar().setTitle("Select a Company");
                invalidateOptionsMenu();

            }

        }; 

        // Setting drawer toggle to drawer Layout
        mDrawerLayout.setDrawerListener(mDrawerToggle);

        // Creating an ArrayAdapter to add items to the list view mDrawerList
        CustomListAdapter adapter = new CustomListAdapter(this, compList, icons);
        // Setting the adapter on mDrawerList
        mDrawerList.setAdapter(adapter);

        // enable home button
        getSupportActionBar().setHomeButtonEnabled(true);

        // enable up navigation
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        // Setting item click listener for the listview mDrawerList
        mDrawerList.setOnItemClickListener(new AdapterView.OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView<?> parent, View view,     int position, long id) {

                // Currently selected company
                mTitle = compList.get(position);
                //get the image id from the image name
                imageId = icons.get(position);

                //setting the comapny item to action bar icon
                getSupportActionBar().setIcon(imageId);

                // Creating a fragment object
                CompanyFragment cFragment = new CompanyFragment();

                // create a bundle object
                Bundle data = new Bundle();
                // Setting the title and image of the currently selected item of mDrawerList
                data.putString("mTitle", mTitle);
                data.putInt("imageId", imageId);
                cFragment.setArguments(data);
                // Getting reference to fragment manager
                FragmentManager fragmentManager = getFragmentManager();
               // creating a fragment transaction
                FragmentTransaction ft = fragmentManager.beginTransaction();
                // adding a fragment to the fragment transaction
                ft.replace(R.id.content_frame, cFragment);

                // commit the transaction
                ft.commit();
                // Closing the drawer
                mDrawerLayout.closeDrawer(mDrawerList);            }

        });

    }
    @Override
    protected void onPostCreate(Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);
        mDrawerToggle.syncState();
    }  
    /**
     * Handling the touch event of app icon
     */
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        if (mDrawerToggle.onOptionsItemSelected(item)) {
            return true;
        } 
        return super.onOptionsItemSelected(item); 
    }
    /**
     * Called whenever we call invalidateOptionsMenu()
     */
    @Override
    public boolean onPrepareOptionsMenu(Menu menu) {
        // If the drawer is open, hide action items related to the content view
        boolean drawerOpen = mDrawerLayout.isDrawerOpen(mDrawerList);
        menu.findItem(R.id.action_settings).setVisible(!drawerOpen);
        return super.onPrepareOptionsMenu(menu); 
    }  
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }
}